<template>
  <div>
    <el-row>
      <el-radio-group v-model="selectedType">
        <el-button
          v-for="(item, index) in types"
          :key="index"
          :type="item.actvie ? 'primary' : ''"
          @click="changeType(item, index)"
          >{{ item.label }}</el-button
        >
      </el-radio-group>
    </el-row>
    <div class="content_border">
      <Detail v-if="selectedType == 1" :fromdata="fromdata" />
      <OrderList v-if="selectedType == 2" :id="id" />
      <InventoryList v-if="selectedType == 3" :id="id" />
    </div>
  </div>
</template>

<script>
import { getDetail } from "@/api/after-sale/storehouseManage/inOfStockManage";
import OrderList from "./orderList";
import InventoryList from "./inventoryList";
import Detail from "./detail";

export default {
  name: "viewClientManage",
  components: { InventoryList, OrderList, Detail },
  props: {
    id: {
      type: Number,
    },
  },
  data() {
    return {
      types: [
        { label: "入库基础信息", value: 1, actvie: true },
        { label: "入库订单信息", value: 2, actvie: false },
        { label: "入库配件详情列表", value: 3, actvie: false },
      ],
      selectedType: 1,
      selectedTypeText: "入库详情",
      fromdata: {},
    };
  },
  async created() {
    const { data } = await getDetail(this.id);
    this.fromdata = data;
  },
  methods: {
    changeType(item, index) {
      this.selectedType = index + 1;
      this.selectedTypeText = item.label;
      this.types.map((e, i) => {
        if (i == index) {
          e.actvie = true;
        } else {
          e.actvie = false;
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.content_border {
  border: 1px solid #dcdfe6;
  padding: 15px;
  margin-top: 20px;
}
</style>
